<template>
  <el-row>
    <el-col :span="24">
      <div class="data-top">
        <div class="img">
          <el-icon>

            <component class="icons" :is="$icon[icon]"></component>

          </el-icon>
        </div>
        <span class="title">{{title}}</span>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { ref, defineProps, computed } from 'vue'
const props = defineProps({
  title: {
    type: String,
    required: true
  },
  icon: {
    type: String,
    required: true

  }

})

console.log(props.icon);

</script>

<style scoped lang="scss">
.data-top {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  color: #478fca;
  font-size: 20px;

  .img {
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
  }

  .title {
    font-size: 16px;
    display: flex;
    align-items: center;
  }
}
</style>